<template>
	<view class="flower-shop">
		<!-- 导航栏 -->
		<view class="navbar">
			<view class="logo">树上</view>
			<view class="search-box">
				<input type="text" placeholder="请搜索鲜花名称" class="search-input" @click="goToSearch"/>
			</view>
			<view class="user-actions">
				<text class="icon" @click="goToSetting">...</text>
			</view>
		</view>
		
		<!-- 服务标签（优化为标签样式） -->
		<view class="service-tags">
			<view class="tag">
				<text class="tag-icon">✓</text>
				<text class="tag-text">品质保障</text>
			</view>
			<view class="tag">
				<text class="tag-icon">🚚</text>
				<text class="tag-text">全国同城</text>
			</view>
			<view class="tag">
				<text class="tag-icon">🌼</text>
				<text class="tag-text">花卉协会</text>
			</view>
			<view class="tag">
				<text class="tag-icon">⏰</text>
				<text class="tag-text">2小时达</text>
			</view>
		</view>
		
		<!-- 轮播图 -->
		<view class="swiper-container">
			<swiper autoplay indicator-dots circular>
				<swiper-item>
					<view class="slide">
						<image src="/static/shopping/送自己.jpg" mode="widthFix" class="slide-img" />
						<view class="slide-text">
							<text class="main-text">给自己开满鲜花的浪漫</text>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="slide">
						<image src="/static/shopping/生日.jpg" mode="widthFix" class="slide-img" />
						<view class="slide-text">
							<text class="main-text">生日专属花束</text>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="slide">
						<image src="/static/shopping/情人节.jpg" mode="widthFix" class="slide-img" />
						<view class="slide-text">
							<text class="main-text">花与礼物</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 用途分类 -->
		<view class="purpose-categories">
			<view class="category-item" @click="switchCategory(index)">
				<view class="category-icon">🌸</view>
				<text class="category-text">鲜花</text>
			</view>
			<view class="category-item" @click="switchCategory(index)">
				<view class="category-icon">💮</view>
				<text class="category-text">永生花</text>
			</view>
			<view class="category-item" @click="switchCategory(index)">
				<view class="category-icon">🎉</view>
				<text class="category-text">花篮</text>
			</view>
			<view class="category-item" @click="switchCategory(index)">
				<view class="category-icon">🌿</view>
				<text class="category-text">绿植花卉</text>
			</view>
		</view>
		
		<!-- 礼券 -->
		<view class="coupon-container">
			<view class="coupon">
				<image src="/static/red packet/代金券.png" mode="widthFix" class="coupon-img" />
				<view class="coupon-content">
					<text class="coupon-title">用户专享优惠</text>
					<text class="coupon-desc">鲜花5元礼券</text>
					<text class="coupon-subdesc">最高立减20元</text>
					<text class="coupon-go" @click="goToDiscount">GO</text>
				</view>
			</view>
		</view>
		
		<!-- 今日推荐（确保商品渲染） -->
		<view class="recommendation">
		  <view class="recommendation-header">
		    <text class="recommendation-title">今日推荐</text>
		    <text class="recommendation-more" @click="goToCategory">更多 ></text>
		  </view>
		  
		  <!-- shop.vue 中 products 区域 -->
		  <view class="products">
		    <view class="product-item" v-for="goods in recommendProducts" :key="goods.id" @click="goToDetail(goods)">
		      <image :src="goods.image" mode="widthFix" class="product-img" />
		      <text class="product-name">{{ goods.name }}</text>
		      <text class="product-desc">简介:{{ goods.intro }}</text>
		      <view class="product-tags">
		        <text class="tag-item">已售 {{ goods.sold }}件</text>
		      </view>
		      <text class="product-price">￥{{ goods.price }}束</text>
		    </view>
		  </view>
		</view>
		
		<view class="no-more">没有更多商品啦</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'SHY',
				currentTab: 'shop',
				// 模拟今日推荐商品数据
				recommendProducts: [
				// 	{ id: 1, image: '/static/images/red_rose_bouquet.jpg', name: '玫瑰礼盒', intro: '精选红玫瑰，爱意满满', tag: '新品', price: 128 },
				// 	{ id: 2, image: '/static/images/永生向日葵.jpg', name: '向日葵花束', intro: '阳光活力，送朋友优选', tag: '新品', price: 98 },
				// 	{ id: 3, image: '/static/images/香水百合.jpg', name: '百合插花', intro: '清新淡雅，家居装饰', tag: '热卖', price: 88 },
				// 	{ id: 4, image: '/static/images/康乃馨.jpg', name: '康乃馨花盒', intro: '感恩之选，送长辈', tag: '热卖', price: 108 },
				// 	{ id: 5, image: '/static/images/永生满天星.jpg', name: '满天星干花', intro: '持久烂漫，装饰好物', tag: '热卖', price: 68 },
				// 	{ id: 6, image: '/static/images/childish_colorful_bouquet.jpg', name: '混搭小花束', intro: '多样花材，精致小巧', tag: '新品', price: 78 }
				]
			}
		},
		onLoad() {
		  this.getRecommendProducts();
		  },
		methods: {
	
			getRecommendProducts() {
			    uni.request({
			      url: `${this.baseUrl}/product/today-recommendation`,
			      success: (res) => {
			        this.recommendProducts = res.data;
			      }
			    });
			  },
			goToSearch() {
			  // 收集所有商品数据（直接使用 recommendProducts 数组）
			  const allGoods = [];
			  // 容错处理：确保 recommendProducts 是数组（避免 undefined 或非数组导致的错误）
			  if (Array.isArray(this.recommendProducts)) {
			    allGoods.push(...this.recommendProducts);
			  }
			  // 跳转到搜索页并携带全量商品数据
			  uni.navigateTo({
			    url: `/pages/search/search?allGoods=${encodeURIComponent(JSON.stringify(allGoods))}`
			  });
			},
			goToSetting(){
				uni.navigateTo({
					url:"/pages/my/setting"
				})
			},
			goToDiscount(){
				uni.navigateTo({
					url:"/pages/discount/discount"
				})
			},
			switchCategory(index) {
				this.currentIndex = index;
			},
			goToCategory() {
				uni.switchTab({
					url: '/pages/category/category'
				});
			},
			// 跳转到商品详情页
			goToDetail(goods) {
				uni.navigateTo({
					url: `/pages/goodsDetail/goodsDetail?goods=${encodeURIComponent(JSON.stringify(goods))}`,
				});
			},
		},
		// onLoad() {
		// 	const pages = getCurrentPages();
		// 	const currentPagePath = pages[pages.length - 1].route;
		// 	switch(currentPagePath) {
		// 		case 'pages/shop/shop':
		// 			this.currentTab = 'shop';
		// 			break;
		// 		case 'pages/category/category':
		// 			this.currentTab = 'category';
		// 			break;
		// 		case 'pages/cart/cart':
		// 			this.currentTab = 'cart';
		// 			break;
		// 		case 'pages/my/my':
		// 			this.currentTab = 'mine';
		// 			break;
		// 	}
		// }
	}
</script>

<style>
	/* 基础样式 */
	.flower-shop {
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
		background-color: #f9f5ff;
		min-height: 100vh;
	}
	
	/* 导航栏 */
	.navbar {
	  display: flex;
	  align-items: center;
	  padding: 20rpx 30rpx;
	  background-color: #9370db;
	  color: white;
	  margin-bottom: -2rpx; /* 与标签底部边框衔接 */
	}
	
	.logo {
	  font-size: 36rpx;
	  font-weight: bold;
	  margin-right: 20rpx;
	}
	
	.search-box {
	  flex: 1;
	  background-color: white;
	  border-radius: 30rpx;
	  padding: 10rpx 20rpx;
	}
	
	.search-input {
	  width: 100%;
	  font-size: 28rpx;
	  color: #666;
	  background-color: transparent;
	  border: none;
	}
	
	.user-actions {
	  display: flex;
	  align-items: center;
	  margin-left: 20rpx;
	}
	
	.icon {
	  font-size: 36rpx;
	  margin-left: 20rpx;
	}
	
	.service-tags {
	  display: flex;
	  padding: 10rpx 20rpx;
	  background-color: #fff;
	  flex-wrap: wrap;
	  justify-content: space-between; /* 均匀分布 */
	}
	
	.tag {
	  display: flex;
	  align-items: center;
	  background-color: #f3e5f5;
	  color: #9c27b0;
	  padding: 6rpx 14rpx;
	  border-radius: 20rpx;
	  margin-bottom: 8rpx;
	  font-size: 22rpx;
	  max-width: 30%; /* 可选：限制最大宽度，使分布更均匀 */
	}
	
	.tag-icon {
	  font-size: 24rpx;
	  margin-right: 6rpx;
	}
	
	.tag-text {
	  font-size: 22rpx;
	}
	
	/* 轮播图 */
	.swiper-container {
		margin: 20rpx 0;
		background-color: white;
		padding: 10rpx;
	}
	
	.slide {
		position: relative;
		border-radius: 20rpx;
		overflow: hidden;
	}
	
	.slide-img {
		width: 100%;
		height: 300rpx;
		object-fit: cover;
	}
	
	.slide-text {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		width: 100%;
	}
	
	.main-text {
		font-size: 40rpx;
		font-weight: bold;
		color: white;
		text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.5);
	}
	
	/* 用途分类 */
	.purpose-categories {
		display: flex;
		justify-content: space-around;
		background-color: white;
		padding: 30rpx 0;
		margin-bottom: 20rpx;
	}
	
	.category-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.category-icon {
		width: 80rpx;
		height: 80rpx;
		background-color: #f3e5f5;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		margin-bottom: 15rpx;
	}
	
	.category-text {
		font-size: 26rpx;
		color: #6a4894;
	}
	
	/* 礼券 */
	.coupon-container {
		padding: 0 20rpx;
		margin-bottom: 20rpx;
	}
	
	.coupon {
		background: linear-gradient(135deg, #ce93d8, #ad43b0);
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		padding: 20rpx;
		color: white;
	}
	
	.coupon-img {
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}
	
	.coupon-content {
		flex: 1;
		position: relative;
	}
	
	.coupon-title {
		font-size: 28rpx;
		display: block;
		margin-bottom: 10rpx;
	}
	
	.coupon-desc {
		font-size: 40rpx;
		font-weight: bold;
		display: block;
		margin-bottom: 5rpx;
	}
	
	.coupon-subdesc {
		font-size: 26rpx;
		opacity: 0.9;
	}
	
	.coupon-go {
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 40rpx;
		font-weight: bold;
	}
	
	/* 今日推荐 */
	.recommendation {
		background-color: white;
		padding: 20rpx 30rpx;
		margin-bottom: 20rpx;
	}
	
	.recommendation-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}
	
	.recommendation-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #6a4894;
	}
	
	.recommendation-more {
		font-size: 28rpx;
		color: #9370db;
	}
	
	.products {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.product-item {
		width: 30%;
		margin-bottom: 30rpx;
	}
	
	.product-img {
		width: 100%;
		height: 200rpx;
		object-fit: cover;
		border-radius: 10rpx;
		margin-bottom: 10rpx;
	}
	
	.product-name {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 5rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.product-desc {
		font-size: 24rpx;
		color: #666;
		display: block;
		margin-bottom: 10rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.product-tags {
		margin-bottom: 10rpx;
	}
	
	.tag-item {
		font-size: 22rpx;
		background-color: #f3e5f5;
		color: #9c27b0;
		padding: 3rpx 10rpx;
		border-radius: 10rpx;
	}
	
	.product-price {
		font-size: 28rpx;
		color: #c2185b;
		font-weight: bold;
	}
	
	.no-more {
		  text-align: center;
		  color: #999;
		  font-size: 28rpx;
		  padding: 30rpx 0;
		  margin-top: 20rpx;
		  background-color: #f9f5ff;
		}
</style>